
<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-12-14 22:15:01
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-12-22 11:24:48
-->
<template>
  <div>
 <el-row>           
    <el-col :span="6" style="padding-right:1em;border-right:1px solid #f4f4f4">   
      <el-tree :data="eds" :props="defaultProps" @node-click="handleNodeClick"></el-tree> 
    </el-col> 
   
   <el-col :span="18">  
     <div v-if="params.device_id">
           
       <div class="engineer">
         <h3>工程信息</h3>
           
            <el-row>
              <el-col :span="12">
                <span class="label" >工程编号</span>
                <span class="value">{{device.engineer.serial_number}}</span>
              </el-col>
              <el-col :span="12">
                <span class="label">工程名称</span>
                <span class="value">{{device.engineer.name}}</span>
              </el-col>
              
              <el-row>
              <el-col :span="12">
                <span class="label">工程类型</span>
                <span class="value">{{device.engineer.type}}</span>
              </el-col>
              <el-col :span="12">
                <span class="label">工程状态</span>
                <span class="value">
                  <el-tag type="success" size="medium" v-if="device.engineer.status== '监测中'">{{device.engineer.status}}</el-tag>
                  <el-tag type="warning" size="medium" v-else-if="device.engineer.status == '未绑定'">{{device.engineer.status}}</el-tag>
                  <el-tag type="danger" size="medium" v-else>{{device.engineer.status}}</el-tag>
                </span>
              </el-col>
              </el-row>

              <el-row>
              <el-col :span="12">
                <span class="label">地址</span>
                <span class="value">{{device.engineer.address}}</span>
              </el-col>
              </el-row>
            </el-row>
       </div>
     

       <div class="device">
            <h3>设备信息</h3>
            <el-row>
              <el-col :span="12">
                <span class="label">设备名称</span>
                <span class="value">{{device.name}}</span>
              </el-col>
              <el-col :span="12">
                <span class="label">设备编号</span>
                <span class="value">{{device.serial_number}}</span>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <span class="label">在线状态 </span>
                <span class="value">
                  <el-tag size="medium" type="success" v-if="device.online_status == 1">在线</el-tag>
                  <el-tag size="medium" type="danger" v-else>离线</el-tag>
                </span>
                
              </el-col>
              <el-col :span="12">
                <span class="label">绑定状态</span>
                <span class="value">
                  <el-tag size="medium" type="success" v-if="device.bind_status== 1">已绑定</el-tag>
                  <el-tag size="medium" type="danger" v-else>未绑定</el-tag>
                </span>
              </el-col>
            </el-row>
       </div>
    

    </div>
     <div v-else style="line-height:3em;color:red;text-align:center">请选择设备</div>
   </el-col>
 </el-row>
  </div>
</template> 

 
<script>     
import {get} from '@/utils/request'
export default {    
  //变量  
  data() {
    return{
      defaultProps:{
         children: 'children',  
          label: 'name'
      },
     eds:[],
     params:{},
     device:{}
    }
  },
 

  //方法
  methods:{
    //加载数据
    loadMonitorDetails(){     
       //调接口:/device/findDeviceDetail  查询设备详情
        let url = "/device/findDeviceDetail" ;  
        get(url,{id:this.params.device_id}).then(resp =>{
           this.device = resp.data;
         });
    },
    handleNodeClick(node){
      if(node.engineer_id){     //判断是工程还是设备，有工程id:engineer_id为设备
        //点击了设备
      this.$set(this.params,'engineer_id',node.engineer_id) //为变量this.params，设置属性engineer_id，值为node.engineer_id
      this.$set(this.params,'device_id',node.id)            //设备id:device_id
     
     // 请求设备信息
        this. loadMonitorDetails();
     }
   },


   //加载工程设备树
   loadEngineerDevices(){
     let url ="/engineer/findEngineerDeviceTree"
     get(url).then(resp =>{
       this.eds = resp.data;
     })
   }
  },
 
 //页面加载完毕后执行
 mounted(){
  this.loadEngineerDevices();
 },
}
</script>

<style scoped>
.engineer .label{
  font-weight: bold;
  padding-right: 5px;
  line-height: 3.5em;
  font-size: 18px;
}
.device .label{
  font-weight: bold;
  padding-right: 5px;
  line-height: 3.5em;
  font-size: 18px;
}

  .el-col {
    border-radius: 5px;
    background-color: #e5ebf3;
  }

</style>
